{# Load the tag library #}
{% load bootstrap4 %}
{% load i18n %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}
{% block extra_head %}
  <!-- Tailwind -->
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
{% endblock %}

{% block content %}
  {% if user.is_authenticated %}
    <div class="mx-auto text-center my-4">
      <a href="{% url 'account_email' %}" class="text-blue-500 hover:text-blue-700">Manage Email</a> |
      <a href="{% url 'account_change_password' %}" class="text-blue-500 hover:text-blue-700">Change Password</a> |
      <a href="{% url 'account_logout' %}" class="text-blue-500 hover:text-blue-700">Logout</a>
    </div>
  {% endif %}

  <div class="max-w-md mx-auto md:max-w-2xl mt-6 min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded-xl mt-16">
    <div class="px-6">
      <div class="flex flex-wrap justify-center">
        <div class="w-full flex justify-center">
          <div class="flex flex-wrap justify-center">
            {% if user.profile.profile_photo.url != None %}
              <img src="{{ user.profile.profile_photo.url|default:'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132' }}" class="rounded-full h-40 w-40 shadow-xl" />
            {% endif %}
          </div>
        </div>
      </div>
      <div class="w-full text-center mt-20">
        <h3 class="text-2xl text-gray-700 font-bold leading-normal mb-1">{% trans 'Welcome' %}! {{ user }}</h3>
      </div>
      <div class="mt-6 py-6 border-t border-gray-200 text-center">
        <div class="flex flex-wrap justify-center">
          <div class="w-full px-4">
            <table class="w-full text-left text-gray-600 mb-4">
              <tr>
                <td class="font-bold leading-relaxed text-gray-700 mb-2">
                  {% if user.email %}Email:{% endif %}
                </td>
                <td class="font-light leading-relaxed text-gray-600 mb-2">
                  {% if user.email %}{{ user.email }}{% endif %}
                </td>
              </tr>
              <tr>
                <td class="font-bold leading-relaxed text-gray-700 mb-2">
                  {% if user.profile.tel %}Telephone:{% endif %}
                </td>
                <td class="font-light leading-relaxed text-gray-600 mb-2">
                  {% if user.profile.tel %}{{ user.profile.tel }}{% endif %}
                </td>
              </tr>
              <tr>
                <td class="font-bold leading-relaxed text-gray-700 mb-2">
                  {% if user.profile.gender %}Gender:{% endif %}
                </td>
                <td class="font-light leading-relaxed text-gray-600 mb-2">
                  {% if user.profile.gender %}{{ user.profile.gender }}{% endif %}
                </td>
              </tr>
            </table>
            <a href="{% url 'userprofile:profile_update' %}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded no-underline">Update</a>
            <div class="mt-6 flex flex-col items-center space-y-4">
              <a href="{% url 'disease_recognition:history_index' %}" class="text-primary hover:text-primary/80 text-sm font-medium">查看个人诊断历史记录</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <footer>
    <div class="text-center p-4 fixed bottom-0 left-0 w-full bg-gray-100">
      <span>© 2025 Copyright:</span>
      <a class="text-gray-600 font-semibold" href="/">基于多模态与双端架构的呼吸道疾病智能诊断与防控平台</a>
    </div>
  </footer>
{% endblock %}
